<template>
  <div id="app">
    <NavBar />
    <br>
    <br>
    <div class="dashboard-container">
      <el-row :gutter="20" class="mt-20">
        <el-col :span="24">
          <div class="user-info">
            <el-avatar :size="100" :src="require('../assets/avatar.jpg')"/>
            <div class="user-details">
              <h3>{{ user.name }}</h3>
              <p>{{ user.phoneNumber }}</p>
              <el-button type="primary" icon="el-icon-edit" @click="goInformation">编辑</el-button>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
    <br>
    <br>
    <div class="function-container">
        <el-container style="height: 500px; border: 1px solid #eee">
          <el-aside width="200px">
            <el-menu default-active="3" class="el-menu-vertical-demo">
              <router-link to="/personalCenter">
                <el-menu-item index="1">
                  我的账户
                </el-menu-item>
              </router-link>
              <router-link to="/personalOrder">
                <el-menu-item index="2">
                  我的订单
                </el-menu-item>
              </router-link>
              <router-link to="/personalService">
                <el-menu-item index="3">
                  售后服务
                </el-menu-item>
              </router-link>
            </el-menu>
          </el-aside>
          <el-main>
            <el-row :gutter="20" class="mt-10">
              <el-table :data="serviceRecords" style="width: 100%">
                <el-table-column prop="serviceRecordId" label="服务记录ID"></el-table-column>
                <el-table-column prop="conversationContent" label="对话内容"></el-table-column>
                <el-table-column prop="conversationStartTime" label="对话开始时间"></el-table-column>
                <el-table-column prop="conversationEndTime" label="对话结束时间"></el-table-column>
                <el-table-column prop="rating" label="评分"></el-table-column>
                <el-table-column prop="complaint" label="投诉"></el-table-column>
                <el-table-column prop="phoneNumber" label="电话号码"></el-table-column>
                <el-table-column prop="customerServiceId" label="客服ID"></el-table-column>
              </el-table>
              <el-table :data="repairRecords" style="width: 100%" v-if="repairRecords.length > 0">
                <el-table-column prop="repairRecordID" label="维修记录ID"></el-table-column>
                <el-table-column prop="appointmentDate" label="预约日期"></el-table-column>
                <el-table-column prop="repairType" label="维修类型"></el-table-column>
                <el-table-column prop="issueDetails" label="问题详情"></el-table-column>
                <el-table-column prop="rating" label="评分"></el-table-column>
                <el-table-column prop="complaint" label="投诉"></el-table-column>
                <el-table-column prop="receiptStatus" label="收据状态"></el-table-column>
                <el-table-column prop="issueResolved" label="问题解决"></el-table-column>
                <el-table-column prop="phoneNumber" label="电话号码"></el-table-column>
              </el-table>
            </el-row>
          </el-main>
        </el-container>
      </div>
    </div>
</template>

<script>
import NavBar from '../components/NavBar.vue';
import axios from 'axios'; 

export default {
  data() {
  return {
    user: {
      name: '', 
      phoneNumber: ''
    },
    serviceRecords: [], // 用于存储服务记录数据的数组
    repairRecords: [] // 用于存储维修服务记录数据的数组
    };
  },
  components: {
    NavBar
  },
  created() {
    this.checkUserToken();
  },
  methods: {
    goInformation() {
      this.$router.push({ path:'/information'});
    },
    checkUserToken() {
      const token = localStorage.getItem('userToken');
      if (token) {
        axios.get('http://localhost:8081/users/info', {
          headers: {
            'Authorization': 'Bearer ' + token
          }
        })
        .then(response => {
          this.user.name = response.data.userName;
          this.user.phoneNumber = response.data.phoneNumber;
          this.fetchServiceRecords(this.user.phoneNumber);
          this.fetchRepairRecords(this.user.phoneNumber);
        })
        .catch(error => {
          console.error("Error fetching user info:", error);
        });
      }
    },
    fetchServiceRecords(phoneNumber) {
      axios.get('http://localhost:8081/customer-service-ratings/recordsByPhoneNumber', {
        params: {
          phoneNumber: phoneNumber
        },
      })
      .then(response => {
        this.serviceRecords = response.data; // 将获取到的服务记录赋值给前端的serviceRecords数组
      })
    },
    fetchRepairRecords(phoneNumber) {
      axios.get('http://localhost:8081/repairman-ratings/maintain-records', {
        params: {
          phoneNumber: phoneNumber
        },
      })
      .then(response => {
        this.repairRecords = response.data;
      })
    }
  }
}
</script>

<style>
  .dashboard-container {
    width: 70%;
    margin: 40px auto; /* 增加顶部边距 */
    padding: 20px;
    box-sizing: border-box;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1), 0 6px 20px rgba(0, 0, 0, 0.1);
  }
  .user-info {
    display: flex;
    align-items: center;
  }
  .user-details {
    margin-left: 20px;
  }
  .user-details h3 {
    margin: 0 0 10px;
  }
  .function-container {
    width: 70%;
    width: 70%;
    margin: 0 auto;
    padding: 20px;
    box-sizing: border-box;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1), 0 6px 20px rgba(0, 0, 0, 0.1);
  }
  .el-aside {
    color: #333;
  }
  
</style>